<template>
  <div class="home">
    <Header head-title="预约挂号" go-back="true"></Header>
    <section class="group Select">
      <div class="Doctor">
        <img src="../../../assets/img/Touxiang.png" alt="">
      </div>
      <div class="Reser">
        <h3 class="fonts">刘艳晓 <span class="fontC">主治医师</span> </h3>
        <p class=fonts>平顶山市第一人民医院</p>
      </div>
    </section>
    <section class="group ReserCon">
      <section class="Select fonts">
        <p class="fontC">就诊医院：</p>
        <p class="Reser">平顶山市第一人民医院</p>
      </section>
      <section class="Select fonts">
        <p class="fontC">科室医生：</p>
        <p class="Reser">刘艳晓 - 内分泌代谢科</p>
      </section>
      <section class="Select fonts">
        <p class="fontC">门诊时间：</p>
        <p class="Reser activecolor">2020-02-20 周四 下午</p>
      </section>
      <section class="Select fonts">
        <p class="fontC">门诊类型：</p>
        <p class="Reser">专家门诊</p>
      </section>
      <section class="Select fonts">
        <p class="fontC">挂号费用：</p>
        <p class="Reser">12.10元</p>
      </section>
      <span class="fontsMin fontCO">挂号费用由医院自行设定，平台不收取任何额外费用</span>
    </section>
    <section class="group fonts">
      <h3 class="HomeH">就诊人信息</h3>
      <div class="Select Reserva">
        <p>选择就诊人：</p>
        <p>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
           <!-- <span class="arrow"><img src="../../../assets/img/arrow.png" alt=""></span>  -->
           </p>
      </div>
      <div class="Select Reserva">
        <p>预约时间段：</p>
        <p>
          <el-time-select v-model="valuetime" :picker-options="{ start: '08:30', step: '00:30', end: '18:30' }" placeholder="选择时间">
          </el-time-select>
        </p>
      </div>
      <div class="Select Reserva">
        <p>初诊/复诊：</p>
        <p><el-select v-model="valueZhen" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </p>
      </div>
      <div class="Reserva SeserMS">
        <p class="fonts">症状描述：</p>
        <textarea class="SerTexa" name="" id="" cols="30" rows="10"></textarea>
      </div>
      <el-button class="Login" type="primary" @click="ReserSuccess()">确认预约</el-button>
    </section>
  </div>
</template>

<script>
import Header from '../../../components/Header'
export default {
  data () {
    return {
      cities: [{
        value: 'chenyuanyuan',
        label: '陈圆圆'
      }, {
        value: 'zhazhahui',
        label: '渣渣辉'
      }, {
        value: 'zhangsansan',
        label: '张三三'
      }, {
        value: 'lisisi',
        label: '李思思'
      }],
      value: '',
      valuetime: '',
      options: [{
        value: 'chu',
        label: '初诊'
      }, {
        value: 'fu',
        label: '复诊'
      }],
      valueZhen: ''
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    //  点击进入科室  挂号
    ToKeshi () {
      this.$router.push({
        path: '/ToKeshi'
      })
    },
    //  确认预约
    ReserSuccess () {
      this.$router.push({
        path: '/ReserSuccess'
      })
    }
  }
}
</script>

<style scoped>
.group1 {
    padding-top: 0;
    margin-top: 0;
}
</style>
